interface TasksPageProps {
  params: { userId: string };
}

export default function TasksPage({ params: { userId } }: TasksPageProps) {
  return (
    <div className="space-y-6">
      {/* 页面标题 */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-foreground">Tasks</h1>
          <p className="text-muted-foreground mt-1">管理和跟踪项目任务</p>
        </div>
        <button className="px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors">
          新建任务
        </button>
      </div>

      {/* 任务统计 */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
        <div className="bg-card rounded-xl p-6 border shadow-sm">
          <div className="flex items-center space-x-3">
            <div className="w-10 h-10 bg-blue-100 dark:bg-blue-900/20 rounded-lg flex items-center justify-center">
              <span className="text-blue-600 dark:text-blue-400 text-lg">📋</span>
            </div>
            <div>
              <div className="text-2xl font-bold text-foreground">24</div>
              <div className="text-sm text-muted-foreground">总任务</div>
            </div>
          </div>
        </div>

        <div className="bg-card rounded-xl p-6 border shadow-sm">
          <div className="flex items-center space-x-3">
            <div className="w-10 h-10 bg-green-100 dark:bg-green-900/20 rounded-lg flex items-center justify-center">
              <span className="text-green-600 dark:text-green-400 text-lg">✅</span>
            </div>
            <div>
              <div className="text-2xl font-bold text-foreground">16</div>
              <div className="text-sm text-muted-foreground">已完成</div>
            </div>
          </div>
        </div>

        <div className="bg-card rounded-xl p-6 border shadow-sm">
          <div className="flex items-center space-x-3">
            <div className="w-10 h-10 bg-yellow-100 dark:bg-yellow-900/20 rounded-lg flex items-center justify-center">
              <span className="text-yellow-600 dark:text-yellow-400 text-lg">🔄</span>
            </div>
            <div>
              <div className="text-2xl font-bold text-foreground">6</div>
              <div className="text-sm text-muted-foreground">进行中</div>
            </div>
          </div>
        </div>

        <div className="bg-card rounded-xl p-6 border shadow-sm">
          <div className="flex items-center space-x-3">
            <div className="w-10 h-10 bg-red-100 dark:bg-red-900/20 rounded-lg flex items-center justify-center">
              <span className="text-red-600 dark:text-red-400 text-lg">⏰</span>
            </div>
            <div>
              <div className="text-2xl font-bold text-foreground">2</div>
              <div className="text-sm text-muted-foreground">即将到期</div>
            </div>
          </div>
        </div>
      </div>

      {/* 任务列表 */}
      <div className="bg-card rounded-xl border shadow-sm">
        <div className="p-6 border-b border-border">
          <div className="flex items-center justify-between">
            <h2 className="text-xl font-semibold text-foreground">任务列表</h2>
            <div className="flex items-center space-x-2">
              <select className="px-3 py-1 border border-input rounded-md text-sm bg-background">
                <option>全部状态</option>
                <option>待处理</option>
                <option>进行中</option>
                <option>已完成</option>
              </select>
              <select className="px-3 py-1 border border-input rounded-md text-sm bg-background">
                <option>全部优先级</option>
                <option>高优先级</option>
                <option>中优先级</option>
                <option>低优先级</option>
              </select>
            </div>
          </div>
        </div>
        
        <div className="p-6">
          <div className="space-y-4">
            {/* 任务项 */}
            {[
              {
                title: '完成用户界面设计',
                description: '设计应用的主要用户界面和交互流程',
                status: 'completed',
                priority: 'high',
                assignee: '张三',
                dueDate: '2024-01-15',
                progress: 100
              },
              {
                title: '实现API接口',
                description: '开发后端API接口，包括用户管理和数据处理',
                status: 'in-progress',
                priority: 'high',
                assignee: '李四',
                dueDate: '2024-01-20',
                progress: 75
              },
              {
                title: '编写测试用例',
                description: '为核心功能模块编写单元测试和集成测试',
                status: 'pending',
                priority: 'medium',
                assignee: '王五',
                dueDate: '2024-01-25',
                progress: 0
              },
              {
                title: '数据库优化',
                description: '优化数据库查询性能，添加索引',
                status: 'in-progress',
                priority: 'medium',
                assignee: '赵六',
                dueDate: '2024-01-22',
                progress: 45
              },
              {
                title: '部署生产环境',
                description: '配置生产环境服务器和部署流程',
                status: 'pending',
                priority: 'low',
                assignee: '钱七',
                dueDate: '2024-01-30',
                progress: 0
              }
            ].map((task, index) => (
              <div key={index} className="border border-border rounded-lg p-4 hover:bg-muted/50 transition-colors">
                <div className="flex items-start justify-between">
                  <div className="flex-1">
                    <div className="flex items-center space-x-3 mb-2">
                      <h3 className="font-medium text-foreground">{task.title}</h3>
                      <span className={`px-2 py-1 text-xs font-medium rounded-full ${
                        task.status === 'completed' 
                          ? 'bg-green-100 dark:bg-green-900/20 text-green-800 dark:text-green-400'
                          : task.status === 'in-progress'
                          ? 'bg-blue-100 dark:bg-blue-900/20 text-blue-800 dark:text-blue-400'
                          : 'bg-gray-100 dark:bg-gray-900/20 text-gray-800 dark:text-gray-400'
                      }`}>
                        {task.status === 'completed' ? '已完成' : 
                         task.status === 'in-progress' ? '进行中' : '待处理'}
                      </span>
                      <span className={`px-2 py-1 text-xs font-medium rounded-full ${
                        task.priority === 'high'
                          ? 'bg-red-100 dark:bg-red-900/20 text-red-800 dark:text-red-400'
                          : task.priority === 'medium'
                          ? 'bg-yellow-100 dark:bg-yellow-900/20 text-yellow-800 dark:text-yellow-400'
                          : 'bg-gray-100 dark:bg-gray-900/20 text-gray-800 dark:text-gray-400'
                      }`}>
                        {task.priority === 'high' ? '高优先级' : 
                         task.priority === 'medium' ? '中优先级' : '低优先级'}
                      </span>
                    </div>
                    <p className="text-sm text-muted-foreground mb-3">{task.description}</p>
                    
                    <div className="flex items-center space-x-6 text-sm text-muted-foreground">
                      <div className="flex items-center space-x-1">
                        <span>👤</span>
                        <span>{task.assignee}</span>
                      </div>
                      <div className="flex items-center space-x-1">
                        <span>📅</span>
                        <span>截止: {task.dueDate}</span>
                      </div>
                      <div className="flex items-center space-x-2">
                        <span>进度:</span>
                        <div className="w-20 h-2 bg-muted rounded-full">
                          <div 
                            className={`h-full rounded-full ${
                              task.progress === 100 ? 'bg-green-500' : 'bg-primary'
                            }`}
                            style={{ width: `${task.progress}%` }}
                          />
                        </div>
                        <span>{task.progress}%</span>
                      </div>
                    </div>
                  </div>
                  
                  <div className="flex items-center space-x-2 ml-4">
                    <button className="px-3 py-1 text-sm border border-input rounded-md hover:bg-accent transition-colors">
                      编辑
                    </button>
                    <button className="px-3 py-1 text-sm text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-md transition-colors">
                      删除
                    </button>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
} 